<template>
	<view class="content">
		<view class="btn">RGB</view>
		
		  <view class="uni-padding-wrap uni-common-mt">
					<view class="slide">
						<view class="text">R</view>
						<slider class="slider" value="50" min="0" max="255" @change="sliderChangeR" show-value />
					</view>
					<view class="slide">
						<view class="text">G</view>
						<slider class="slider" value="40" min="0" max="255" @change="sliderChangeG" show-value />
					</view>
					<view class="slide">
						<view class="text">B</view>
						<slider class="slider" value="30" min="0" max="255" @change="sliderChangeB" show-value />
					</view>
		  </view>
			
			<view class="sub">
				  <view class="tijiao" @click="cancel">取消</view>
					<view class="tijiao" @click="submit">提交</view>
			</view>
	</view>
</template>

<script>
	import { reactive, toRefs, ref, onMounted,defineEmits } from "vue";
	export default {
		//接收父组件传过来的值
		 props: {
		    allow: {
		      type: Boolean,
		      default: "",
		    },
		  },
			setup(props,context) {
				//给子组件传来的值赋值
		    let bool = reactive({
					type:''
				})
			
				let data = reactive({
					R:'',
					G:'',
					B:''
				})
				function sliderChangeR(e){
					console.log(e.detail.value)
					data.R = e.detail.value
					console.log(data.R)
				context.emit('sendDataR',data.R)
				}
				function sliderChangeG(e){
					console.log(e)
					data.G = e.detail.value
					console.log(data.G)
					context.emit('sendDataG',data.G)
				}
				function sliderChangeB(e){
					console.log(e)
					data.B = e.detail.value
					console.log(data.B)
					context.emit('sendDataB',data.B)
				}
				function cancel(){
					console.log("取消")
					console.log(props)
					bool.type = props.allow
						bool.type = false
						console.log(bool.type)
					context.emit('AllowData',bool.type)
					
				}
				function submit(){
					console.log("提交")
					bool.type = props.allow
					console.log(bool.type)
					bool.type = false
					context.emit('AllowData',bool.type)

				}
				return {
					sliderChangeR,
					sliderChangeG,
					sliderChangeB,
					cancel,
					submit,
					data,
					bool
				
				
				}
			}
		}
	
</script>

<style lang="scss" scoped>
	.content{
		width: 650rpx;
		height: 400rpx;
		border: 1rpx solid #ccc;
		margin:-50rpx 50rpx ;
		background-color: azure;
	
		.btn{
			width: 150rpx;
			height: 50rpx;
			background-color: crimson;
			text-align: center;
			margin: 2% 38%;
			color: azure;
			
		}
		.slide{
			display: flex;
			.slider{
				width: 500rpx;
			}
			.text{
				margin: 15rpx;
				
			}
			
		}
		.sub{
			display: flex;
			// margin:10rpx 100rpx;
			justify-content:space-around;
			text-align: center;
		
			.tijiao{
				width: 120rpx;
				height: 60rpx;
					background-color: skyblue;
					border-radius: 10rpx;
					color: azure;
					font-size: 30rpx;
				
				
			}
		}
	}
	
</style>